<template>
    <el-dialog :draggable="true" :destroy-on-close="true" :model-value="checkDialog" @close="onCancel"
        :close-on-click-modal="false" width="70%" class="check-dialog">
        <template #header>
            <span> 审核费用</span>
        </template>
        <div class="top_no">
            <el-row>
                <el-col :span="6">费用单号：{{ feeNo }}</el-col>
                <el-col :span="6">
                    审核状态：<el-tag type="warning">待审核</el-tag>
                </el-col>
                <el-col :span="6">工单单号：{{ workNo }}</el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table :border="true" stripe resizable height="400px" :data="tableDataList.feeDetails">
                <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
                    <template v-slot="i">
                        {{ i.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="审核状态" width="120">
                    <template #default="scope">
                        <el-select placeholder="审核状态" v-model="scope.row.status" filterable clearable>
                            <el-option v-for="item in options2" :value="item.value" :label="item.name" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="结算类型" width="150" show-overflow-tooltip>
                    <template #default="scope">
                        <el-select placeholder="结算类型" v-model="scope.row.type" filterable clearable>
                            <el-option v-for="item in options1" :value="item.value" :key="item.value" :label="item.name" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="费用项目" width="120">
                    <template #default="scope">
                        <el-select placeholder="请选择" filterable clearable v-model="scope.row.workFeeProjectId"
                            :remote-method="getworkFeeProjectPageSelect" :loading="loading" remote remote-show-suffix>
                            <el-option v-for="item in modules" :value="item.id"
                                @click="changeworkFeeProjectId(item, scope.$index)" :label="item.name" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="申请数量" width="90">
                    <template #default="scope">
                        <el-input clearable @input="scope.row.qty = scope.row.qty.replace(/\D/g, '')"
                            v-model="scope.row.qty" placeholder="数量" />
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="单价金额" width="130">
                    <template #default="scope">
                        <el-input clearable v-model="scope.row.price" @keyup="checkNum"
                            @input="scope.row.price = scope.row.price.replace(/[^\d.]/g, '')">
                            <template #prepend>￥</template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="总金额" width="100">
                    <template #default="scope">
                        <el-input :disabled="true" clearable :value="scope.row.price * scope.row.qty"
                            @input="scope.row.price = scope.row.price.replace(/\D/g, '')">
                            <template #prepend>￥</template>
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" min-width="140" max-width="150">
                    <template #default="scope">
                        <el-input v-model="scope.row.remark" placeholder="填写备注" />
                    </template>
                </el-table-column>
                <el-table-column label="附件(最多上传8个)" :width="480">
                    <template #default="scope">
                        <div class="updata_pic">
                            <el-upload action="#" multiple list-type="picture-card" accept="image/*,.pdf"
                                :auto-upload="false" :show-file-list="false"
                                :on-change="(file) => { getProImages(file, scope.$index) }">
                                <div class="plus_add">
                                    <el-icon size="12">
                                        <Plus />
                                    </el-icon>
                                </div>
                            </el-upload>
                            <div class="disf_ipc" v-for="(img, index) in scope.row.images">
                                <img :src="pdf" alt="" style="width: 100%;cursor: pointer"
                                    v-if="(img.image.replace(/.+\./, '') == 'pdf') || img.file?.type.includes('pdf')">
                                <img class="img" :src="img.image" v-else />
                                <span class="item-actions">
                                    <el-icon color="#fff" size="12" class="item-preview"
                                        @click="handlePictureCardPreview(img.image)"><zoom-in /></el-icon>
                                    <el-icon size="12" color="#fff" class="item-delete"
                                        @click="handleRemove(index, scope.$index)">
                                        <Delete />
                                    </el-icon>
                                </span>
                            </div>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer_remark">
            <el-form-item label="审核备注" label-width="auto">
                <el-input class="w_input" type="textarea" size="small" show-word-limit maxlength="200"
                    :autosize="{ minRows: 2, maxRows: 4 }" v-model="tableDataList.remark" clearable placeholder="填写备注信息" />
            </el-form-item>
        </div>
        <div class="btns flex-justify-end">
            <el-button color="#007cff" class="btn_save" :disabled="$route.query.isArchive=='true'"  @click="onSave">确认审核</el-button>
            <el-button @click="onCancel" class="btn_cancel"> 取消 </el-button>
        </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible" draggable title="查看附件" top="8vh">
        <iframe :src="`${dialogImageUrl}`" style="height: 660px;width: 100%;" frameborder="0"></iframe>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, toRefs, watch, reactive, onMounted } from 'vue'
import { OrderFeeDetailProjectInfo, checkOrderFee, workFeeProjectPageSelect } from '../../../../api/order'
import { orderAnnexUpload } from '../../../../api/upload'
import pdf from '@/assets/image/pdf.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkNum } from '../../../../utils/validate'
const props = defineProps({
    checkDialog: Boolean,
    feeId: String,
    workNo: String,
    feeNo: String,
})
const { checkDialog, feeId, feeNo, workNo } = toRefs(props)
const dialogVisible = ref(false)
const dialogImageUrl = ref(null)
const modules = ref(null)
const loading = ref(false)
const emits = defineEmits(['assign-dialog', 'update-list'])
// 结算类型
const options1 = [{ name: '向服务商收取', value: 1 }, { name: '向服务商支付', value: 2 }, { name: '向客户收取', value: 3 }, { name: '向客户支付', value: 4 }]
// 审核状态
const options2 = [{ name: '已通过', value: 2 }, { name: '已驳回', value: 3 }]
const tableDataList = reactive({
    "feeDetails": [
        {
            "delImageIds": [],//删除的工单费用图片对象ID	
            "id": null,//	费用项目详情ID，新增不必传，修改必传
            "images": [
                {
                    "id": null,
                    "image": "",
                    file: null
                }
            ],
            "price": 0,//费用金额
            "qty": 1,//数量
            "remark": "",//备注
            "status": 1,//审核状态 1-待审核，2-已通过，3-已驳回
            "type": 1,//结算类型：1-向服务商收取，2-向服务商支付，3-向客户收取，4-向客户支付,示例值(1)
            "workFeeProjectId": null,//工单费用项目ID	
            updatePrice: false
        }
    ],
    "id": null,//服务费用项目ID
    "remark": ""//	审核备注
})
// 费用项目下拉数据
async function getworkFeeProjectPageSelect(val) {
    loading.value = true
    let data = {
        "limit": 0,
        "name": val,
        "page": 0
    }
    await workFeeProjectPageSelect(data).then(res => {
        if (res.data.success) {
            modules.value = res.data.data.rows
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                duration: 4000,
                offset: 200,
                type: 'error'
            })
        }
        loading.value = false
    })
}
// 保存
async function onSave() {
    for (const key in tableDataList.feeDetails) {
        let imgobj = tableDataList.feeDetails[key];
        if (imgobj.images.length > 0) {
            let arrimg = []
            for (let i = 0; i < imgobj.images.length; i++) {
                if (imgobj.images[i].file) {
                    arrimg = [imgobj.images[i].file]
                    imgobj.images.splice(i, 1)
                    await orderAnnexUpload(arrimg).then(res => {
                        imgobj.images.push(...res.data.data.rows.map(o => ({ id: null, image: o })))
                    })
                }
            }
        }
    }
    await checkOrderFee(tableDataList).then(res => {
        if (res.data.success) {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'success',
                offset: 200,
            })
            emits('update-list')
            onCancel()
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                duration: 4000,
                offset: 200,
                type: 'error'
            })
        }
    })
}
// 费用项目选择变化
function changeworkFeeProjectId(item, index) {
    tableDataList.feeDetails[index].price = item.price
    tableDataList.feeDetails[index].updatePrice = item.updatePrice
}
// 获取详情
const getOrderFeeDetailProjectInfo = async (id) => {
    await OrderFeeDetailProjectInfo(id).then(res => {
        if (res.data.success) {
            tableDataList.feeDetails = res.data.data.row.map(o => {
                o.status = o.status == 1 ? 2 : o.status
                return { ...o, statusType: o.status, delImageIds: [] }
            })
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                duration: 4000,
                offset: 200,
                type: 'error'
            })
        }
    })
}
// 查看图片
const handlePictureCardPreview = (img) => {
    dialogImageUrl.value = img
    dialogVisible.value = true
}
// 添加图片
const getProImages = (img, index) => {
    if (tableDataList.feeDetails[index].images.length >= 8) {
        ElMessage({
            showClose: true,
            message: '最多上传8个',
            duration: 4000,
            offset: 200,
            type: 'error'
        })
        return
    }
    tableDataList.feeDetails[index].images.push({ image: img.url, file: img.raw, id: null })
}
// 删除图片
const handleRemove = (imgindex, index) => {
    tableDataList.feeDetails[index].images = tableDataList.feeDetails[index].images.filter((o, i) => {

        if (i == imgindex && o.id) {
            tableDataList.feeDetails[index].delImageIds.push(o.id)
        }
        return i != imgindex
    })
}
const onCancel = () => {
    emits('assign-dialog')
}
onMounted(async () => {
    if (feeId.value) {
        tableDataList.id = feeId.value
        await getOrderFeeDetailProjectInfo(feeId.value)
    }
    getworkFeeProjectPageSelect('')
})
</script>
<style lang="scss" scoped>
.top_no {
    padding-bottom: 8px;
    font-size: 12px;
    color: #999;
}

.operation {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
        cursor: pointer;
        margin: 0 6px;

        &:hover {
            transform: scale(1.2);
        }
    }
}

:deep(.el-table td.el-table__cell) {
    .el-input {
        .el-input__wrapper {
            height: 28px;
        }

        .el-input-group__prepend {
            padding: 0 2px;
        }
    }
}

.footer_remark {
    margin-top: 20px;

    .w_input {
        width: 600px;
        margin-left: 10px;
    }
}

:deep(.el-upload-list--picture-card) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;

    .el-upload {
        width: 40px;
        height: 40px;
        margin: 0 8px 0 0;
    }

    .el-upload-list__item {
        width: 40px;
        height: 40px;
        margin: 0 8px 0 0;
    }
}

:deep(.updata_pic) {
    display: flex;
    align-items: center;

    .el-upload {
        &.el-upload--picture-card {
            width: 40px;
            height: 40px;
        }
    }

    .disf_ipc {
        display: flex;
        width: 40px;
        height: 40px;
        position: relative;
        margin-left: 6px;
        border: 1px solid #7f7f7f27;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;

        .img {
            width: 100%;
            position: absolute;
            border-radius: 4px;
        }

        .item-actions {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
        }

        &:hover .item-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #7f7f7f9d;
            opacity: 1;
            border-radius: 4px;

            .item-preview {
                margin: 0 4px;
                cursor: pointer;

                &:hover {
                    transform: scale(1.2);
                }
            }

            .item-delete {
                margin: 0 4px;
                cursor: pointer;

                &:hover {
                    transform: scale(1.2);
                }
            }
        }
    }
}

@import '../index.scss'
</style>